// 开店界面
<template>
  <div class="full-screen-container">
    <el-card class="form-card" shadow="hover">
      <h2 class="form-title">申请开店</h2>
      <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
        <el-form-item label="店名" prop="shopName">
          <el-input v-model="form.shopName" maxlength="12"></el-input>
        </el-form-item>
        <el-form-item label="商品类别" prop="categories">
          <el-input v-model="form.categories" placeholder="多个类别用逗号分隔"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="商店简介" prop="description">
          <el-input type="textarea" v-model="form.description" maxlength="128"></el-input>
        </el-form-item>
        <el-form-item label="备案地址" prop="address">
          <el-input v-model="form.address" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="注册资金" prop="capital">
          <el-input v-model="form.capital" type="number"></el-input>
        </el-form-item>
        <el-form-item label="注册时间" prop="registrationDate">
          <el-date-picker v-model="form.registrationDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交申请</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    const form = ref({
      shopName: '',
      categories: '',
      idCard: '',
      description: '',
      address: '',
      capital: null,
      registrationDate: ''
    });

    const rules = {
      shopName: [
        { required: true, message: '请输入店名', trigger: 'blur' },
        { max: 12, message: '店名不能超过12个字符', trigger: 'blur' }
      ],
      categories: [
        { required: true, message: '请输入商品类别', trigger: 'blur' }
      ],
      idCard: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
        { pattern: /^\d{18}$/, message: '身份证号格式不正确', trigger: 'blur' }
      ],
      description: [
        { max: 128, message: '商店简介不能超过128个字符', trigger: 'blur' }
      ],
      address: [
        { required: true, message: '请输入备案地址', trigger: 'blur' },
        { max: 32, message: '备案地址不能超过32个字符', trigger: 'blur' }
      ],
      capital: [
        { required: true, message: '请输入注册资金', trigger: 'blur' },
        { type: 'number', min: 1000, message: '注册资金必须大于1000', trigger: 'blur' }
      ],
      registrationDate: [
        { required: true, message: '请选择注册时间', trigger: 'change' }
      ]
    };

    const submitForm = () => {
      const formRef = ref(null);
      formRef.value.validate(async (valid) => {
        if (valid) {
          const shopData = {
            ...form.value,
            categories: form.value.categories.split(','),
            capital: parseFloat(form.value.capital)
          };

          try {
            const response = await fetch('/api/shops', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(shopData)
            });

            if (!response.ok) {
              throw new Error('提交失败');
            }

            ElMessage.success('申请已提交');
          } catch (error) {
            console.error(error);
            ElMessage.error('提交失败，请稍后再试');
          }
        } else {
          ElMessage.error('请检查表单数据的有效性');
        }
      });
    };

    return {
      form,
      rules,
      submitForm
    };
  }
};
</script>

<style>
.full-screen-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.form-card {
  width: 400px;
  padding: 20px;
}

.form-title {
  text-align: center;
  margin-bottom: 20px;
}
</style>
